<cfcomponent output="false">

	<!--- --->

	<cffunction name="renderGoal" access="public" output="true" returntype="string">
		<cfargument name="goalID" required="true" />
		<cfargument name="name" required="true" />
		<cfargument name="description" required="true" />
		<cfargument name="expanded" required="false" default="false" />
		<cfargument name="milestone_count" required="false" default="0" />
		<cfargument name="action_count" required="false" default="0" />
		<cfargument name="showMilestoneGoalID" required="false" default="" />
		<cfargument name="showActionGoalID" required="false" default="" />
		<cfargument name="start" required="false" default="01/01/#year(now())#" />
		<cfargument name="end" required="false" default="01/01/#year(now())+1#" />
		<cfargument name="time_frame" required="false" default="" />
		<cfargument name="past" required="False" default="false" />
		<cfargument name="future" required="false" default="false" />
		<cfargument name="abandoned" required="false" default="0" />
		<cfargument name="measurable" required="false" default="0" />
		<cfargument name="unit" required="false" default="" />
		<cfargument name="target_count" required="false" default="" />
		
		<cfset var local = {} />
		
		<cfset arguments.start = dateFormat(arguments.start,'mm/dd/yyyy') />
		<cfset arguments.end = dateFormat(arguments.end,'mm/dd/yyyy') />
		
		<cfif arguments.measurable eq 1>
			<cfset local.hideMeasurableFields = false />
		<cfelse>
			<cfset local.hideMeasurableFields = true />
		</cfif>
		
		<cfsavecontent variable="local.result">
			<div class="widget widget-form goal <cfif arguments.expanded eq true>expanded</cfif>">
				<div class="widget-title">
					<div class="trophy-case">
						<i class="fa fa-trophy"></i>
					</div>
					<cfif arguments.past>
						<i class="fa fa-frown-o"></i>
					<cfelse>
						<i class="fa fa-crosshairs"></i>
					</cfif>
					<cfif arguments.goalID eq "">
						New Goal
					<cfelse>
						<span <cfif arguments.abandoned eq 1>class="abandoned"</cfif>>
							#arguments.name#
						</span>
					</cfif>
				</div>
				<div class="widget-content">
					#$.render.form(name='goal_#arguments.goalID#',method='goalController.saveGoal',onsubmit="return Goals.validateSaveGoal(this);")#
						<input type="hidden" name="goalID" value="#arguments.goalID#" />
						#application.v.craftivityView.renderInput(name="name",label="Name",value=arguments.name,validate="required",varchar=200)#
						#application.v.craftivityView.renderDate(name="start",label="Start Date",value=arguments.start,validate="required,date")#
						#application.v.craftivityView.renderDate(name="stop",label="End Date",value=arguments.end,validate="date,required")#
						#application.v.craftivityView.renderTextarea(name="description",label="Description",value=arguments.description)#
						#application.v.craftivityView.renderCheckbox(name="measurable",label="Measurable",value=arguments.measurable,onclick="Goals.toggleMeasurable(this);",instructions="Track a goal's progress numerically")#
						<cfsavecontent variable="local.target">
							#application.v.craftivityView.renderInput(name="target",label="Target",width="85px",value=arguments.target_count,hideField=local.hideMeasurableFields,fieldonly=true,Placeholder="Number of",validate="positive,integer")#
							#application.v.craftivityView.renderInput(name="unit",label="Unit",width="85px",value=arguments.unit,varchar=100,hideField=local.hideMeasurableFields,fieldonly=true,Placeholder="Units (plural)")#
						</cfsavecontent>
						#application.v.craftivityView.renderField(validate="required",name="Target",field=local.target)#
						<cfif arguments.goalID neq "">
							#application.v.craftivityView.renderCheckbox(name="abandoned",label="Abandoned",value=arguments.abandoned,instructions="Give up? Stop seeing this goal in the Milestones widget")#
						<cfelse>
							#application.v.craftivityView.renderInput(name="target_count",label="Target Count",validate="number",hideField=local.hideMeasurableFields)#
							<cfsavecontent variable="local.milestones">
								#$.run.it('craftivityView.renderSelect',{
									name="milestone_frequency",
									labels="Monthly,Weekly,Every Other Week,Twice A Month,Quarterly,- Custom -",
									values="monthly,weekly,biweekly,bimonthly,quarterly,custom",
									fieldonly="true",
									blank="false"
								})#
							</cfsavecontent>	
							#$.run.it('craftivityView.renderField',{name="Milestones",field=local.milestones})#
						</cfif>
						
						<div class="buttons" style="width:278px;height:24px;padding:3px;">
							<button type="button" name="goal_edit" class="left small" onclick="Goals.showGoalEdit(this);">edit</button>
							<button type="submit" name="goal_save" class="right red small" style="display:none;">save</button>
							<cfif arguments.goalID neq "">
								<button type="button" name="goal_delete" class="right small" style="display:none;" onclick="Goals.deleteGoal('#arguments.goalID#');">delete</button>
							</cfif>
							<cfif arguments.goalID eq "">
								<button type="button" name="goal_cancel" class="right grey small" onclick="Goals.cancelGoalAdd(this);" style="display:none;">cancel</button>
							<cfelse>
								<button type="button" name="goal_cancel" class="right grey small" onclick="Goals.hideGoalEdit(this);" style="display:none;">cancel</button>
							</cfif>
						</div>
					</form>
				
					<cfif arguments.goalID neq "">
						<cfset local.milestones = $.run.it('goalService.getMilestones',{goalID=arguments.goalid}) />
						<div class="widget-title sub first" style="cursor:pointer;padding-right:0px;" onclick="Goals.toggleMilestones($(this).find('i.action_toggle'));">
							<cfif arguments.milestone_count gt 0>
								<i class="action_toggle fa <cfif arguments.goalID neq arguments.showMilestoneGoalID>fa-toggle-down<cfelse>fa-toggle-up</cfif>"></i>
							</cfif>
							&nbsp;&nbsp;&nbsp;Milestones&nbsp;
							<cfloop query="local.milestones">
								<cfif local.milestones.currentRow lt 16>
									<cfset local.milestoneDate = $.date.applyLocalization(local.milestones.date) />
									<cfset local.dateCompare = dateCompare($.date.getDate(),local.milestoneDate) />
									<cfset local.complete = local.milestones.complete />
									<cfif local.milestones.locked eq -1 and local.dateCompare eq 1 or local.milestones.locked eq -1 and local.dateCompare eq 0>
										<cfset local.complete = 1 /><!--- past milestones that are start are considered complete --->
										<Cfset local.dateCompare = -1 /><!--- set to future so it doesn't trigger a color --->
									</cfif>
									<div milestoneID="#local.milestones.id#" class="counter-block
										<cfif local.complete eq 1> complete</cfif>
										<cfif local.dateCompare eq 1> past</cfif>
										<cfif local.dateCompare eq 0> current</cfif>
									"></div>
								</cfif>
							</cfloop>
							<cfif arguments.milestone_count eq 0>
								<button type="button" name="add" class="right small red add_milestone_button" onclick="Goals.showAddMilestone(this);">add</button>
							</cfif>
						</div>
						<div class="goal_milestones" style="<cfif arguments.goalID neq arguments.showMilestoneGoalID>display:none;</cfif>">
							<cfloop query="local.milestones">
								#$.run.it('goalView.renderMilestone',{
									goalID=arguments.goalID,
									milestoneID=local.milestones.id,
									complete=local.milestones.complete,
									date=local.milestones.date,
									description=local.milestones.description,
									locked=local.milestones.locked,
									time_frame=arguments.time_frame,
									measurable=local.milestones.goal_measurable,
									target_count=local.milestones.target_count,
									actual_count=local.milestones.actual_count,
									unit=arguments.unit
								})#
							</cfloop>
							<cfif arguments.milestone_count gt 0>
								<div class="add-button-container">
									<button type="button" name="add" class="right small red" onclick="Goals.showAddMilestone(this);">add milestone</button>
								</div>
							</cfif>
						</div>
						<!--- empty milestone form --->
						<div class="add_milestone" style="display:none;">
							#$.run.it('goalView.renderMilestone',{
								goalID=arguments.goalID,
								milestoneID="",
								complete=false,
								date="",
								description=arguments.name, <!--- from the goal --->
								time_frame=arguments.time_frame,
								measurable=arguments.measurable,
								unit=arguments.unit
							})#
						</div>
						<cfset local.actions = $.run.it('goalService.getActions',{goalID=arguments.goalid}) />
						<div class="widget-title sub first" style="cursor:pointer;" onclick="Goals.toggleActions($(this).find('i.action_toggle'));">
							<cfif arguments.action_count gt 0>
								<i class="action_toggle fa fa-toggle-<cfif arguments.goalID neq arguments.showActionGoalID>down<cfelse>up</cfif>"></i>
							</cfif>
							&nbsp;&nbsp;&nbsp;Action Plan<cfif arguments.action_count neq 1>s</cfif>&nbsp;
							<cfloop query="local.actions">
								<div class="counter-block action"></div>
							</cfloop>
							<cfif arguments.action_count eq 0>
								<button type="button" name="add" class="right red small add_action_button" onclick="Goals.showAddAction(this);">add</button>
							</cfif>
						</div>
						<div class="goal_actions_div" style="<cfif arguments.goalID neq arguments.showActionGoalID>display:none;</cfif>">
							<cfloop query="local.actions">
								#$.run.it('goalView.renderAction',{
									goalID=arguments.goalID,
									actionID=local.actions.id,
									name=local.actions.name,
									milestoneID=local.actions.goal_milestone_id,
									milestone_description=local.actions.milestone_description,
									goalMilestones=local.milestones,
									time_frame=arguments.time_frame
								})#
							</cfloop>
							<cfif arguments.action_count gt 0>
								<div class="add-action-container">
									<button type="button" name="add" style="float:none;" class="right red small add_action_button" onclick="Goals.showAddAction(this);">add action plan</button>
								</div>
							</cfif>
							<cfif arguments.future>
								<div class="instructions" style="padding:0px 4px;color:##777777;">* Action Plans for Future Goals will not be scheduleable in the Workweek calendar</div>
							</cfif>
						</div>
						<div style="height:5px;"></div>
						<!--- empty action form --->
						<div class="add_action" style="display:none;">
							#$.run.it('goalView.renderNewAction',{
								goalID=arguments.goalID,
								goalMilestones=local.milestones,
								time_frame=arguments.time_frame
							})#
						</div>
					</cfif>
				</div>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderMilestone" access="public" output="true" returntype="string">
		<cfargument name="milestoneID" required="true" />
		<cfargument name="goalID" required="true" />
		<cfargument name="date" required="true" />
		<cfargument name="description" required="true" />
		<cfargument name="complete" required="false" default="false" />
		<cfargument name="locked" required="false" default="0" />
		<cfargument name="time_frame" required="false" default="" />
		<cfargument name="editable" required="false" default="true" />
		<cfargument name="measurable" required="false" default="0" />
		<cfargument name="target_count" required="false" default="" />
		<cfargument name="actual_count" required="false" default="" />
		<cfargument name="unit" required="false" default="" />
		
		<cfset var local = {} />
		
		<cfset local.class = "milestone" />
		<cfif arguments.milestoneID eq "">
			<cfset local.class = "milestone edit" />
		</cfif>

		<cfif isDate(arguments.date)>
			<cfset local.milestoneDate = $.date.applyLocalization(arguments.date) />
		<cfelse>
			<cfset local.milestoneDate = arguments.date />
		</cfif>
		
		<cfset local.dateClass="" />
		<cfif local.milestoneDate neq "" and dateCompare($.date.getDate(),local.milestoneDate) eq 0>
			<cfset local.dateClass = "current" />
		<cfelseif local.milestoneDate neq "" and dateCompare($.date.getDate(),local.milestoneDate) eq 1>
			<cfset local.dateClass = "past" />
		</cfif>
		
		<!--- because you shouldn't have to 'check' that a goal started --->
		<cfif arguments.locked eq -1 and local.dateClass neq "">
			<cfset arguments.complete = true />
		</cfif>
		
		<!--- set up the green css --->
		<cfif arguments.complete>
			<cfset local.class = local.class & ' complete'>
		</cfif>

		<cfsavecontent variable="local.result">
			#$.render.form(name='milestone_#arguments.milestoneID#',class=local.class,method='goalController.saveMilestone')#
				<input type="hidden" name="milestoneID" value="#arguments.milestoneID#" />
				<input type="hidden" name="goalID" value="#arguments.goalID#" />
				<input type="hidden" name="locked" value="#arguments.locked#" />
				<input type="hidden" name="time_frame" value="#arguments.time_frame#" />
				<cfif arguments.milestoneID neq "">
					<input 
						type="checkbox" 
						name="complete" 
						value="1" 
						onclick="Goals.saveMilestoneComplete(this,'#arguments.milestoneID#');" 
						<cfif arguments.complete>checked</cfif> <!--- start milestones that are past or current day show up as completed --->
						<cfif arguments.locked eq -1 and local.dateClass neq ""> disabled</cfif>
					/>
				</cfif>
				<div class="milestone-date">
					<div class="milestone-date-show #local.dateClass#">#$.format.humanizeDate(local.milestoneDate)#</div>
					<div class="milestone-date-edit">
						<input validate="required,date" name="date" placeholder="Date" value="#$.format.humanizeDate(local.milestoneDate,'mm/dd/yyyy')#">
					</div>
				</div>
				<div class="milestone-description">
					<cfif arguments.measurable eq 1>
						<div class="milestone-description-show">
							<cfif arguments.actual_count eq "">?<cfelse>#arguments.actual_count#</cfif>
							&nbsp;&nbsp;of&nbsp;&nbsp;#arguments.target_count# #arguments.unit#
						</div>
						<div class="milestone-description-edit" style="margin-left:4px;margin-right:5px;text-align:right;">
							<input validate="number" placeholder="Current" name="actual_count" value="#arguments.actual_count#">
							<span style="font-size:11px;padding:3px;">of</span>
							<input validate="number" placeholder="Target" name="target_count" value="#arguments.target_count#">
							<input type="hidden" name="description" value="#arguments.description#">
							<span style="font-size:11px;padding:3px;">#arguments.unit#</span>
						</div>
					<cfelse>
						<div class="milestone-description-show">#arguments.description#</div>
						<div class="milestone-description-edit"><input validate="required,maxLength500" placeholder="<cfif arguments.milestoneID eq "">New Milestone<cfelse>Description</cfif>" name="description" value="#arguments.description#"></div>
					</cfif>
				</div>
				<cfif arguments.editable>
					<i class="fa fa-pencil" onclick="Goals.editMilestone(this);" <cfif arguments.locked neq 0>style="right:0px;"</cfif>></i>
					<cfif arguments.locked eq 0>
						<i class="fa fa-times" onclick="Goals.deleteMilestone(this);"></i>
					</cfif>
				</cfif>
				<div class="milestone-buttons">
					<button type="button" class="small grey" onclick="Goals.cancelEditMilestone(this);">cancel</button>
					<button type="submit" class="small red">save</button>
				</div>
			</form>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

	<cffunction name="renderAction" access="public" output="true" returntype="string">
		<cfargument name="actionID" required="true" />
		<cfargument name="goalID" required="true" />
		<cfargument name="name" required="true" />
		<cfargument name="milestoneID" required="true" />
		<cfargument name="milestone_description" required="true" />
		<cfargument name="goalMilestones" required="true" />
		<cfargument name="time_frame" required="false" default="" />
		
		<cfset var local = {} />

		<cfset local.workweekEvents = $.run.it('workweekService.getWorkweekEvents',{goalActionID=arguments.actionID}) />

		<cfsavecontent variable="local.result">
			#$.render.form(name='action_#arguments.actionID#',class='action',method='goalController.saveAction')#
				<input type="hidden" name="actionID" value="#arguments.actionID#" />
				<input type="hidden" name="goalID" value="#arguments.goalID#" />
				<input type="hidden" name="old_name" value="#arguments.name#" />
				<input type="hidden" name="time_frame" value="#arguments.time_frame#" />
				<div class="action-header">Action Plan Name</div>
				<div class="action-name">
					<div class="action-name-show">#arguments.name#</div>
					<div class="action-name-edit"><input validate="required,maxLength200" placeholder="Name" name="name" value="#arguments.name#"></div>
				</div>
				<div class="action-milestoneID">
					<cfif arguments.milestone_description neq "">
						<div class="action-header" style="margin-top:10px;">Milestone</div>
						<div class="action-milestoneID-show">#arguments.milestone_description#</div>
					</cfif>
					<div class="action-milestoneID-edit">
						<select name="milestoneID" placeholder="Milestone">
							<option value="">- Milestone -</option>
							<cfloop query="arguments.goalMilestones">
								<option value="#arguments.goalMilestones.id#" <cfif arguments.goalMilestones.id eq arguments.milestoneID>selected</cfif>>#arguments.goalMilestones.description#</option>
							</cfloop>
						</select>
					</div>
				</div>
				<i class="fa fa-pencil" onclick="Goals.editAction(this);" style="top:4px;"></i>
				<i class="fa fa-times" onclick="Goals.deleteAction(this);" style="top:3px;"></i>
				<div class="action-buttons">
					<button type="button" class="small grey" onclick="Goals.cancelEditAction(this);">cancel</button>
					<button type="submit" class="small red">save</button>
				</div>
				
				<cfif local.workweekEvents.recordcount gt 0>
					<div class="action-header" style="margin-top:10px;">
						Workweek Actions
					</div>
				</cfif>
				<cfloop query="local.workweekEvents">
					<cfset local.duration = $.run.it('workweekService.humanizeDuration',{duration=local.workweekEvents.duration}) />
					<div class="action-workweek-event we-cat#local.workweekEvents.category#">
						<span style="width:65px;font-size:11px;position:absolute;left:3px;top:3px;text-align:left;">
							#local.duration#
						</span>
						<span style="width:20px;">
							#dayOfWeekShortAsString((local.workweekEvents.weekday + 1))# <cfif isDate(local.workweekEvents.start_time)>#$.format.humanizeTime(local.workweekEvents.start_time,true)#</cfif>
						</span>
						<cfif not isDate(local.workweekEvents.start_time)>
							<span>(unscheduled)</span>
						</cfif>
					</div>
				</cfloop>
			</form>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

	<cffunction name="renderNewAction" access="public" output="true" returntype="string">
		<cfargument name="goalID" required="true" />
		<cfargument name="goalMilestones" required="true" />
		<cfargument name="time_frame" required="false" default="" />
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			#$.render.form(name='new_action',method='goalController.saveGoalActionWorkweekEvents',onsubmit="return Goals.validateSaveNewAction(this);")#
				<input type="hidden" name="goalID" value="#arguments.goalID#" />
				<input type="hidden" name="time_frame" value="#arguments.time_Frame#" />
				#$.run.it('workweekView.renderFormElements')#
				<cfif arguments.goalMilestones.recordcount gt 0>
					#application.v.craftivityView.renderSelect(name="milestoneID",label="Milestone",query=arguments.goalMilestones,optionText="description",instructions="If milestone is selected, Workweek Action will disappear after milestone is completed.")#
				</cfif>
				<div class="buttons" style="width:278px;display:inline-block;height:23px;padding:3px;margin-bottom:-10px;">
					<button type="button" name="open_options" class="left small" onclick="Main.toggleOptions('workweekCategories');">edit categories</button>
					<button type="submit" name="action_save" class="right red small">save</button>
					<button type="button" name="action_cancel" class="right grey small" onclick="Goals.cancelAddAction(this);">cancel</button>
				</div>
			</form>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

</cfcomponent>